<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-store"/>
    <meta http-equiv="Expires" content="0" />
    <meta charset="UTF-8">
    <title>收费单</title>
    <link rel="stylesheet" th:href="@{/static/plugins/layui/css/layui.css}">
    <link rel="stylesheet" href="/static/css/financial/receipt/receipt_pay.css">
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static/favicon.ico}">
</head>
<body>
    <div class="container">
        <div class="title">收 费 单</div>
        <div class="info">
            <div class="layui-row row">
                <div class="layui-col-xs3 text-right">名称</div>
                <div class="layui-col-xs9 r" th:text="${receipt.name}"></div>
                <input type="hidden" id="receiptId" th:value="${receipt.id}">
                <input type="hidden" id="orgId" th:value="${receipt.orgId}">
            </div>
            <div class="layui-row row">
                <div class="layui-col-xs3 text-right">所属人</div>
                <div class="layui-col-xs9 r" th:text="${receipt.elderlyName}"></div>
            </div>
            <div class="layui-row row">
                <div class="layui-col-xs3 text-right">所属机构</div>
                <div class="layui-col-xs9 r" th:text="${org.name}"></div>
            </div>
            <div class="layui-row row">
                <div class="layui-col-xs3 text-right">支付状态:</div>
                <div class="layui-col-xs9 r" th:if="${receipt.status == 1}" >待支付</div>
                <div class="layui-col-xs9 r" th:if="${receipt.status == 3}" >已支付</div>
                <div class="layui-col-xs9 r" th:if="${receipt.status == 4}" >预期</div>
                <div class="layui-col-xs9 r" th:if="${receipt.status == 5}" >作废</div>
            </div>

            <div class="layui-row row">
                <div class="layui-col-xs3 text-right">应收金额</div>
                <div class="layui-col-xs9 r" th:text="'￥'+${receipt.amount}"></div>
            </div>
            <div class="sub-title">
                收费项目
            </div>
            <table class="layui-table">
                <tr>
                    <th style="font-weight: bold">项目名称</th>
                    <th style="font-weight: bold">费用</th>
                </tr>
                <tr th:each="item : ${items}">
                    <td th:text="${item.name}"></td>
                    <td th:text="'￥'+${item.monery}"></td>
                </tr>
            </table>
        </div>

        <button th:if="${receipt.status != 3}" class="pay-btn wx" data-channel="1">微 信 支 付</button>
        <button th:if="${receipt.status != 3}" class="pay-btn zfb" data-channel="2">支 付 宝</button>
        <button th:if="${receipt.status != 3}" class="pay-btn yl" data-channel="3">银 联 支 付</button>
    </div>
    <script th:src="@{/static/plugins/jquery.js}"></script>
    <script th:src="@{/static/plugins/layui/layui.js}"></script>
    <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"></script>
    <script src="/static/js/financial/receipt/receipt_pay.js"></script>
</body>
</html>